import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Button, Popup, Progress } from "react-vant";
import { Select, Space } from "antd";
import axios from "../utils/request";
import { Close, Passed } from "@react-vant/icons";
type Props = {};

const Filling = (props: Props) => {
  const [title, setTitle] = useState("请选择");
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    setTitle(value);
  };
  const navigate = useNavigate();
  const [data, setData] = useState(
    JSON.parse(localStorage.getItem("arr") as any) || []
  );
  const [obj, setObj] = useState(
    JSON.parse(localStorage.getItem("obj") as any)
  );
  //返回到上一页
  const goHome = () => {
    navigate("/seat");
  };
  //获取日历时间
  const date = localStorage.getItem("date");
  //去乘客列表页面
  const gocontacts = () => {
    navigate("/gocontacts");
  };
  //删除乘客
  const del = (id: any) => {
    (async () => {
      let res = await axios.post("/delchecked", { id, flag: "false" });
    })();
    data.forEach((item: any, index: any) => {
      if (item.id === id) {
        data.splice(index, 1);
      }
    });
    localStorage.setItem("arr", JSON.stringify(data));
    setData(JSON.parse(localStorage.getItem("arr") as any));
  };

  //添加乘客
  const addcontacts = () => {
    let date = new Date().getTime();
    data.push({
      id: date,
    });
    setData(data);
    localStorage.setItem("arr", JSON.stringify(data));
    setData(JSON.parse(localStorage.getItem("arr") as any));
  };

  //提交订单
  const [visible, setVisible] = useState(false);

  //进度条
  const [num, setNum] = useState(0);
  const tjorder = () => {
    let n = 0;
    let timer = setInterval(() => {
      n += 10;
      if (n === 110) {
        clearInterval(timer);
        let num = "";
        for (let i = 0; i < 3; i++) {
          num += Math.floor(Math.random() * 10);
        }
        console.log(num);
        let obj1: any = {
          id: num,
          name: data[0].name,
          title: `${obj.start}-${obj.end} ${obj.train}`,
          price: obj.price,
          status: "待支付",
          date: `${2022}年${date}`,
          train: "03车厢18A号",
          seat: title,
          ordernumber: "E369941878",
          dbnumber: "BW123455",
          tel: "15932203712",
          idnumber: "110102**********28",
        };
        localStorage.setItem("num", data.length);

        navigate("/details", { state: obj1 });
        (async () => {
          let res = await axios.post("/addorder", obj1);
          console.log(res.data);
        })();
      }
      setNum(n);
    }, 100);
    setVisible(true);
  };
  //input
  const change = (e: any) => {
    console.log(e);
  };
  const change1 = (e: any) => {
    console.log(e);
  };
  return (
    <div className="filling">
      <Popup round visible={visible} onClose={() => setVisible(false)}>
        <div style={{ width: "300px", height: "300px" }}>
          <div className="bigbox">
            <div className="dwbox">
              <div className="zuo">
                <p>请确认车次信息</p>
                <h4>
                  {obj.start}-{obj.end}
                  {obj.train}
                </h4>
              </div>
              <Passed color="rgb(0,172,189)" />
            </div>
            <div className="dwbox">
              <div className="zuo">
                <p>出发时间</p>
                <h4>
                  {date} {obj.starttime}
                </h4>
              </div>
              <Passed color="rgb(0,172,189)" />
            </div>
            <div className="dwbox">
              <div className="zuo">
                <p>乘车人</p>
                <h4>{data.length > 0 ? data[0].name : ""}</h4>
              </div>
              <Passed color="rgb(0,172,189)" />
            </div>
          </div>
          <div className="pop-box2">
            <p>
              <span>核验乘客信息成功,占座中...</span>
              <span className="ss">{num}%</span>
            </p>
            <Progress percentage={num} />
          </div>
        </div>
      </Popup>
      <header>
        <span onClick={goHome}>{"<"}</span>
        <span>订单填写</span>
        <span></span>
      </header>
      <main>
        <div style={{ width: "100%", height: "20px" }}></div>
        <div className="box1">
          <div className="zuo">
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.start}
            </span>
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.starttime}
            </span>
            <span>{date}</span>
          </div>
          <div className="zhong">
            <span>{obj.train}</span>
            <span>
              ——<span style={{ color: "rgb(0, 172, 189)" }}>时刻表</span>——
            </span>
            <span>消耗{obj.time}</span>
          </div>
          <div className="you">
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.end}
            </span>
            <span style={{ fontWeight: "800", fontSize: "16px" }}>
              {obj.endtime}
            </span>
            <span>{date}</span>
          </div>
        </div>
        <div className="box2">
          <span>
            坐席:
            <Select
              defaultValue="请选择"
              style={{ width: 120 }}
              onChange={handleChange}
              options={[
                { value: "靠窗", label: "靠窗" },
                { value: "不靠窗", label: "不靠窗" },
              ]}
            />
          </span>
          <span></span>
          <div>
            <span>二等座</span>
            <span style={{ color: "orange" }}>￥{obj.price}</span>
          </div>
        </div>
        <div className="box3">
          <div className="box3-box1">
            {data.length > 0
              ? data.map((item: any, index: any) => {
                  return (
                    <div key={index} className="box">
                      <div className="zuo">
                        <Close onClick={() => del(item.id)} color="red" />
                      </div>
                      <div className="you">
                        <div className="shang">
                          <span>姓名</span>
                          <input
                            onChange={change}
                            type="text"
                            value={item.name}
                          />
                          <span>{item.status}</span>
                        </div>
                        <div className="xia">
                          <span>身份证</span>
                          <input
                            onChange={change1}
                            type="text"
                            value={item.id_number}
                          />
                        </div>
                      </div>
                    </div>
                  );
                })
              : ""}
          </div>
          <div className="box3-btn">
            <Button onClick={addcontacts}>添加成人</Button>
            <Button onClick={gocontacts}>选择乘客</Button>
          </div>
        </div>
      </main>
      <footer>
        <div>
          <span>
            <b style={{ color: "orange" }}>￥{obj.price * data.length}</b>元
          </span>
          <span>支付金额</span>
        </div>
        <div>
          <Button onClick={tjorder}>提交订单</Button>
        </div>
      </footer>
    </div>
  );
};

export default Filling;
